<template>
  <div>
    <Card style="position: relative">
      <Spin size="large" fix v-if="spinShow"></Spin>
      <Alert type="warning">
        <template slot="desc">
          为了方便在创建直播间时从选择商品，请尽量提前提审直播商品
        </template>
      </Alert>

      <Form :model="liveForm" ref="liveForm" :rules="liveRulesForm" :label-width="120">
        <FormItem label="直播标题" prop="name">
          <Input
            :disabled="liveStatus != 'NEW'"
            v-model="liveForm.name"
            style="width: 460px"
          ></Input>
          <div class="tips">
            直播间名字，最短3个汉字，最长17个汉字，1个汉字相当于2个字符
          </div>
        </FormItem>
        <FormItem label="主播昵称" prop="anchorName">
          <Input
            :disabled="liveStatus != 'NEW'"
            v-model="liveForm.anchorName"
            style="width: 360px"
          ></Input>
          <div class="tips">
            主播昵称，最短2个汉字，最长15个汉字，1个汉字相当于2个字符
          </div>
        </FormItem>
        <FormItem label="直播时间" prop="startTime">
          <DatePicker
            :disabled="liveStatus != 'NEW'"
            format="yyyy-MM-dd HH:mm"
            type="datetimerange"
            v-model="times"
            @on-change="handleChangeTime"
            :options="optionsTime"
            placeholder="直播计划开始时间-直播计划结束时间"
            style="width: 300px"
          >
          </DatePicker>
          <div class="tips">
            直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）
          </div>
        </FormItem>

        <FormItem label="主播微信号" prop="anchorWechat">
          <Input
            :disabled="liveStatus != 'NEW'"
            v-model="liveForm.anchorWechat"
            style="width: 360px"
            placeholder="主播微信号"
          ></Input>
          <div class="tips">
            主播微信号，如果未实名认证，需要先前往“小程序直播”小程序进行<a
              target="_black"
              href="https://res.wx.qq.com/op_res/9rSix1dhHfK4rR049JL0PHJ7TpOvkuZ3mE0z7Ou_Etvjf-w1J_jVX0rZqeStLfwh"
              >实名验证</a
            >
          </div>
        </FormItem>

        <!-- 分享卡片 -->
        <FormItem label="分享卡片封面" prop="feedsImg">
          <div class="upload-list" v-if="liveForm.feedsImg">
            <template>
              <img :src="liveForm.feedsImg" />
              <div class="upload-list-cover">
                <Icon
                  type="ios-eye-outline"
                  @click.native="handleView(liveForm.feedsImg)"
                ></Icon>
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemove('feedsImg')"
                ></Icon>
              </div>
            </template>
          </div>
          <Upload
            v-if="liveForm.feedsImg.length == 0"
            ref="upload"
            :show-upload-list="false"
            :on-success="handleFeedsImgSuccess"
            :format="['jpg', 'jpeg', 'png']"
            :on-format-error="handleFormatError"
            :max-size="1024"
            :on-exceeded-size="handleMaxSize"
            type="drag"
            :action="action"
            :headers="accessToken"
            style="display: inline-block; width: 58px"
          >
            <div style="width: 58px; height: 58px; line-height: 58px">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <div class="tips">直播间分享图，图片规则：建议像素800*640，大小不超过1M；</div>
        </FormItem>

        <!-- 直播间背景墙 -->
        <FormItem label="直播间背景墙" prop="coverImg">
          <div class="upload-list" v-if="liveForm.coverImg">
            <template>
              <img :src="liveForm.coverImg" />
              <div class="upload-list-cover">
                <Icon
                  type="ios-eye-outline"
                  @click.native="handleView(liveForm.coverImg)"
                ></Icon>
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemove('coverImg')"
                ></Icon>
              </div>
            </template>
          </div>
          <Upload
            v-if="liveForm.coverImg.length == 0"
            ref="upload"
            :show-upload-list="false"
            :on-success="handleCoverImgSuccess"
            :format="['jpg', 'jpeg', 'png']"
            :on-format-error="handleFormatError"
            :max-size="1024"
            :on-exceeded-size="handleMaxSize"
            type="drag"
            :action="action"
            :headers="accessToken"
            style="display: inline-block; width: 58px"
          >
            <div style="width: 58px; height: 58px; line-height: 58px">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <div class="tips">直播间背景图，图片规则：建议像素1080*1920，大小不超过1M</div>
        </FormItem>

        <!-- 直播间背景墙 -->
        <FormItem label="直播间分享图" prop="shareImg">
          <div class="upload-list" v-if="liveForm.shareImg">
            <template>
              <img :src="liveForm.shareImg" />
              <div class="upload-list-cover">
                <Icon
                  type="ios-eye-outline"
                  @click.native="handleView(liveForm.shareImg)"
                ></Icon>
                <Icon
                  type="ios-trash-outline"
                  @click.native="handleRemove('shareImg')"
                ></Icon>
              </div>
            </template>
          </div>
          <Upload
            v-if="liveForm.shareImg.length == 0"
            ref="upload"
            :show-upload-list="false"
            :on-success="handleShareImgSuccess"
            :format="['jpg', 'jpeg', 'png']"
            :on-format-error="handleFormatError"
            :max-size="1024"
            :on-exceeded-size="handleMaxSize"
            type="drag"
            :action="action"
            :headers="accessToken"
            style="display: inline-block; width: 58px"
          >
            <div style="width: 58px; height: 58px; line-height: 58px">
              <Icon type="ios-camera" size="20"></Icon>
            </div>
          </Upload>
          <div class="tips">直播间分享图，图片规则：建议像素800*640，大小不超过1M</div>
        </FormItem>

        <FormItem label="商品" v-if="$route.query.id">
          <Button
            type="primary"
            ghost
            @click="liveGoodsVisible = true"
            :disabled="liveStatus != 'NEW'"
            icon="md-add"
            >添加商品</Button
          >
          <Table class="goods-table" :columns="liveColumns" :data="liveData">
            <template slot-scope="{ row, index }" slot="goodsName">
              <div class="flex-goods">
                <Badge v-if="index == 0 || index == 1" color="volcano"></Badge>
                <img class="thumbnail" :src="row.thumbnail || row.goodsImage" />
                {{ row.goodsName || row.name }}
              </div>
            </template>
            <template slot-scope="{ row }" class="price" slot="price">
              <div>
                <div v-if="row.priceType == 1">{{ row.price | unitPrice("￥") }}</div>
                <div v-if="row.priceType == 2">
                  {{ row.price | unitPrice("￥") }}至{{ row.price2 | unitPrice("￥") }}
                </div>
                <div v-if="row.priceType == 3">
                  {{ row.price | unitPrice("￥")
                  }}<span class="original-price">{{ row.price2 | unitPrice("￥") }}</span>
                </div>
              </div>
            </template>
            <template slot-scope="{ row }" slot="quantity">
              <div>{{ row.quantity }}</div>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <div class="action">
                <Button
                  size="small"
                  type="primary"
                  :disabled="liveStatus != 'NEW'"
                  @click="deleteGoods(row, index)"
                  >删除</Button
                >
                <Button
                  size="small"
                  ghost
                  type="primary"
                  :disabled="liveStatus != 'NEW'"
                  @click="onMove(row.id, 1)"
                  >上移</Button
                >
                <Button
                  size="small"
                  ghost
                  type="primary"
                  :disabled="liveStatus != 'NEW'"
                  @click="onMove(row.id, 0)"
                  >下移</Button
                >
              </div>
            </template>
          </Table>
          <div class="tips">
            直播间商品中前两个商品将自动被选为封面，伴随直播间在直播列表中显示
          </div>
        </FormItem>

        <FormItem>
          <Button type="primary" v-if="liveStatus == 'NEW'" @click="createLives()"
            >保存</Button
          >
        </FormItem>
      </Form>
    </Card>
    <!-- 浏览图片 -->
    <Modal title="查看图片" v-model="imageVisible">
      <img :src="imageSrc" v-if="imageVisible" style="width: 100%" />
    </Modal>

    <Modal width="800" v-model="liveGoodsVisible" footer-hide>
      <liveGoods @selectedGoods="callBackData" reviewed />
    </Modal>
  </div>
</template>

<script>
import { uploadFile } from "@/libs/axios";
import {
  addLive,
  addLiveGoods,
  editLive,
  getLiveInfo,
  delRoomLiveGoods,
} from "@/api/promotion";
import liveGoods from "./liveGoods";
export default {
  components: {
    liveGoods,
  },
  data() {
    return {
      spinShow: false, // loading加载
      liveGoodsVisible: false, //选择商品
      imageVisible: false, //查看图片的dailog
      imageSrc: "", //查看图片的路径
      action: uploadFile, // 上传地址
      accessToken: {}, // 验证token
      liveStatus: "NEW", //当前直播状态
      // 不能选择今天以前的时间
      optionsTime: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        },
      },
      // 直播间数据上传规则
      liveRulesForm: {
        name: [
          { required: true, message: "请输入直播标题", trigger: "blur" },
          { max: 17, min: 3, message: "直播间名字最短3个汉字，最长17个汉字" },
        ],
        anchorName: [
          { required: true, message: "请输入主播昵称", trigger: "blur" },
          { max: 15, min: 2, message: "主播昵称最短2个汉字，最长15个汉字" },
        ],
        anchorWechat: [{ required: true, message: "请输入主播微信号", trigger: "blur" }],
        startTime: [
          {
            required: true,
            message: "请正确输入开始时间以及结束时间",
          },
        ],
        feedsImg: [{ required: true, message: "分享卡片封面不能为空", trigger: "blur" }],
        coverImg: [{ required: true, message: "直播间背景墙不能为空", trigger: "blur" }],
        shareImg: [{ required: true, message: "直播间分享图不能为空", trigger: "blur" }],
      },
      liveForm: {
        name: "", //直播标题
        anchorName: "", //主播昵称
        anchorWechat: "", //主播微信号
        feedsImg: "", //分享卡片封面
        coverImg: "", //直播间背景墙
        shareImg: "", //分享图
        startTime: "",
      },

      times: [], //接收直播时间数据
      // 直播商品表格表头
      liveColumns: [
        {
          title: "商品",
          slot: "goodsName",
        },
        {
          title: "价格",
          slot: "price",
        },
        {
          title: "库存",
          slot: "quantity",
          width: 100,
        },
        {
          title: "操作",
          slot: "action",
          width: 250,
        },
      ],
      liveData: [], //直播商品集合
    };
  },
  mounted() {
    /**
     * 如果query.id有值说明是查看详情
     * liveStatus 可以判断当前直播状态 从而区分数据 是否是未开始、已开启、已关闭、
     */
    if (this.$route.query.id) {
      // 获取直播间详情
      this.getLiveDetail();
    }
    this.accessToken = {
      accessToken: this.getStore("accessToken"),
    };
  },
  methods: {
    /**
     * 删除直播间商品
     */
    async deleteGoods(val, index) {
      this.$Spin.show();
      let res = await delRoomLiveGoods(this.liveForm.roomId, val.liveGoodsId);
      if (res.success) {
        this.$Message.success("删除成功!");
        this.liveData.splice(index, 1);
        this.$Spin.hide();
      } else {
        this.$Spin.hide();
      }
    },
    /**
     * 获取直播间详情
     */
    async getLiveDetail() {
      let result = await getLiveInfo(this.$route.query.id);

      // 将数据回调到liveform里面
      if (result.success) {
        console.log(result);
        let data = result.result;
        for (let key in data) {
          this.liveForm[key] = data[key];
        }
        // 将选择的商品回调给表格

        this.liveData = data.commodityList;

        // 将时间格式化
        this.$set(
          this.times,
          [0],
          this.$options.filters.unixToDate(data.startTime, "yyyy-MM-dd hh:mm")
        );
        this.$set(
          this.times,
          [1],
          this.$options.filters.unixToDate(data.endTime, "yyyy-MM-dd hh:mm")
        );
        this.liveStatus = data.status;
      }
    },
    /**
     * 上下移动功能
     * dir 1为上 0为下
     */
    onMove(code, dir) {
      let moveComm = (curIndex, nextIndex) => {
        let arr = this.liveData;
        arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0];
        return arr;
      };
      this.liveData.some((val, index) => {
        if (val.id === code) {
          if (dir === 1 && index === 0) {
            this.$message.Warning("已在顶部！");
          } else if (dir === 0 && index === this.liveData.length - 1) {
            this.$message.Warning("已在底部！");
          } else {
            let nextIndex = dir === 1 ? index - 1 : index + 1;
            this.liveData = moveComm(index, nextIndex);
          }
          return true;
        }
        return false;
      });
    },
    /**
     * 回调的商品选择数据
     */
    callBackData(way) {
      console.log(way);
      this.liveGoodsVisible = false;
      this.$Spin.show();
      addLiveGoods({
        roomId: this.$route.query.roomId,
        liveGoodsId: way.liveGoodsId,
        goodsId: way.goodsId,
      }).then((res) => {
        if (res.success) {
          this.liveData.push(way);
          this.$Spin.hide();
          console.log(this.liveData);
        } else {
          this.$Spin.hide();
        }
      });
    },

    /**
     * 上传图片查看图片
     */
    handleView(src) {
      this.imageVisible = true;
      this.imageSrc = src;
    },

    /**
     * 删除上传的图片
     */
    handleRemove(type) {
      if (this.liveStatus == "NEW") {
        this.liveForm[type] = "";
      } else {
        this.$Message.error("当前状态禁止修改删除!");
      }
    },
    /**
     * 直播间背景图上传成功回调
     */
    handleCoverImgSuccess(res) {
      this.liveForm.coverImg = res.result;
    },
    /**
     * 直播间分享图上传成功回调
     */
    handleShareImgSuccess(res) {
      console.log(res);
      this.liveForm.shareImg = res.result;
    },

    /**
     * 分享卡片封面上传成功回调
     */
    handleFeedsImgSuccess(res) {
      this.liveForm.feedsImg = res.result;
    },

    /**
     * 直播间背景图
     */
    handleCoverImgSuccess(res) {
      this.liveForm.coverImg = res.result;
    },

    tipsDateError() {
      this.$Message.error({
        content:
          "直播开播时间需要在当前时间的10分钟后并且,开始时间不能在6个月后,直播计划结束时间（开播时间和结束时间间隔不得短于30分钟，不得超过24小时）",
        duration: 5,
      });
    },

    /**
     * 选择时间后的回调
     */
    handleChangeTime(daterange) {
      /**
       * 直播开播时间需要在当前时间的10分钟后
       * 此处设置默认为15分钟方便调整
       */
      let siteTime = new Date().getTime() / 1000;
      let selectTime = new Date(daterange[0]).getTime() / 1000;
      let currentTime = this.$options.filters.unixToDate(siteTime);
      /**
       * 开播时间和结束时间间隔不得短于30分钟，不得超过24小时
       * 判断用户设置的结束时间
       */
      let endTime = new Date(daterange[1]).getTime() / 1000;
      if (selectTime <= siteTime + 15 * 60) {
        this.tipsDateError();
        return false;
      } else if (selectTime + 30 * 60 >= endTime) {
        // 不能小于30分钟

        this.tipsDateError();
        return false;
      } else if (selectTime + 24 * 60 * 60 <= endTime) {
        // 不能超过24小时

        this.tipsDateError();
        return false;
      } else if (
        // 不能超过6个月
        siteTime >=
        new Date().getTime() + 6 * 31 * 24 * 3600 * 1000 + 86400000
      ) {
        this.tipsDateError();
        return false;
      } else {
        this.$set(this.times, [0], currentTime);
        this.times[1] = daterange[1];

        // this.times = daterange;
        this.$set(this.liveForm, "startTime", new Date(daterange[0]).getTime() / 1000);
        this.$set(this.liveForm, "endTime", new Date(daterange[1]).getTime() / 1000);
      }
    },

    /**
     * 对图片错误进行回调
     */
    handleFormatError(file) {
      this.$Notice.warning({
        title: "请上传正确的图片格式！",
        desc: file.name + " 格式不为 jpg or png.",
      });
    },

    /**
     * 对图片的大小进行处理回调
     */
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "图片超过限制大小！",
        desc: "图片超过规定限制大小，请重新上传",
      });
    },

    /**
     * 限制只能上传一张图片
     */
    handleBeforeUpload(type) {
      const check = this.liveForm[type].length < 1;
      if (!check) {
        this.$Notice.warning({
          title: "最多上传一张图片",
        });
      }
      return check;
    },

    /**
     * 添加直播间 /broadcast/studio/edit
     */
    createLives() {
      this.$refs["liveForm"].validate((valid) => {
        if (valid) {
          // 需判断当前是否是添加商品
          if (this.$route.query.id) {
            this.spinShow = true;
            this.liveForm.commodityList = JSON.stringify(this.liveForm.commodityList);
            delete this.liveForm.updateTime;
            // 将当前直播间修改
            editLive(this.liveForm).then((res) => {
              if (res.success) {
                this.$Message.success("修改成功!");

                this.$router.push({ path: "/promotion/live" });
              }
              this.spinShow = false;
            });
          } else {
            // 此处为创建直播
            this.spinShow = true;
            addLive(this.liveForm).then((res) => {
              if (res.success) {
                this.$Message.success("添加成功!");

                this.$router.push({ path: "/promotion/live" });
              }
              this.spinShow = false;
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.action {
  display: flex;
  /deep/ .ivu-btn {
    margin: 0 5px !important;
  }
}
.original-price {
  margin-left: 10px;
  color: #999;
  text-decoration: line-through;
}
.thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 0.4em;
}
.flex-goods {
  margin: 10px;
  display: flex;

  align-items: center;
  > img {
    margin-right: 10px;
  }
}
.tips {
  color: #999;
  font-size: 12px;
}
.goods-table {
  width: 1000px;
  margin: 10px 0;
}
.upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.upload-list img {
  width: 100%;
  height: 100%;
}
.upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
  display: block;
}
.upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
</style>
